<!--挂号选择儿童疫苗-->
<template>
    <div class="process-wrapper">
        <nav-com :navText="navText" :navTextDes="navTextDes"></nav-com>

        <div class="content">
            <nav-bar :navBarText="navBarText"></nav-bar>

            <div class="search">
                <Form :model="formItem" :label-width="100" inline>
                    <div class="top">
                        <FormItem label="宝宝姓名">
                            <Input v-model="formItem.name" placeholder="输入姓名"></Input>
                        </FormItem>
                        <FormItem label="疫苗本编号">
                            <Input v-model="formItem.serial" placeholder="输入疫苗本编码" ></Input>
                        </FormItem>
                        <FormItem label="身份证号">
                            <Input v-model="formItem.idcard" placeholder="输入身份证号码" ></Input>
                        </FormItem>
                    </div>

                    <div class="data">
                        <FormItem label="出生日期">
                            <DatePicker v-model="formItem.birthday" format="yyyy-MM-dd" type="date" placeholder="出生日期" style="width: 210px"></DatePicker>
                        </FormItem>
                        <div class="right">
                            <Button class="search-btn" @click="search">查 询</Button>
                            <Button class="reset-btn" @click="reset">重 置</Button>
                            <Button class="search-btn"  @click="addPeople">添 加</Button>
                        </div>
                    </div>

                </Form>
            </div>
        </div>

        <div class="process-list">
            <div>
                <Table :columns="columns" :data="childlist" :loading="loading"></Table>
                <div class="page-wrapper">
                    <Page   class-name="page-layout"
                            placement="top"
                            :current="formItem.pageIndex"
                            :page-size="formItem.pageSize"
                            :total="total"
                            @on-change="pageIndexChange"
                            @on-page-size-change="pageSizeChange"
                    >
                    </Page>
                </div>
            </div>
        </div>

        <div class="bottom-btn">
            <Button class="back-btn" @click="back">返 回</Button>
        </div>


        <!--新建儿童-->
        <add-info :visible.sync="infoVisible"></add-info>

        <!--编辑儿童-->
        <edit-info :visible.sync="editVisible"
                   :childId="childId" :editBasicInfo="editBasicInfo"
                   :hbean="hbean" :nbean="nbean" ></edit-info>

        <!--认证儿童-->
        <approve-info :visible.sync="approveVisible"
                      :childId="childId" :editBasicInfo="editBasicInfo"
                       :hbean="hbean" :nbean="nbean"></approve-info>


        <!--疫苗选择-->
        <vaccine-select :visible.sync="vaccineVisible"></vaccine-select>
    </div>
</template>

<script>
    import navCom from '@/components/nav-com.vue';
    import navBar from '@/components/nav-bar.vue';
    import addInfo from '@/views/inoculate/components/addInfo.vue';
    import editInfo from '@/views/inoculate/components/editInfo';
    import approveInfo from '@/views/inoculate/components/approveInfo';
    import vaccineSelect from '@/views/inoculate/components/vaccineSelect';
    import {peoplelist,editpeople,peoplePlanbaby} from '@/api/inoculate/inoculate';

    export default {
        data () {
            return {
                navText: '挂号接种',
                navTextDes: '挂号处理',
                navBarText: '儿童选择',
                editTitle: '编辑儿童信息',
                addTitle: '新建儿童信息',

                formItem: {
                    name: '',
                    serial: '',
                    idcard: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                loading: false,
                infoVisible: false,
                vaccineVisible: false,
                editVisible: false,
                approveVisible: false,
                childlist: [],
                total: 0,
                columns:[
                    {
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            return h('span',params.row.name?params.row.name:'--');
                        }
                    },
                    {
                        title: '疫苗本编码',
                        key: 'serialnum',
                        render: (h, params) => {
                            return h('span',params.row.serialnum?params.row.serialnum:'--');
                        }
                    },
                    {
                        title: '身份证号',
                        key: 'idcard',
                        render: (h, params) => {
                            return h('span',params.row.idcard?params.row.idcard:'--');
                        }
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        render: (h, params) => {
                            return h('span',params.row.sex==false?'男':'女');
                        }
                    },
                    {
                        title: '出生日期',
                        key: 'birthday',
                        render: (h, params) => {
                            return h('span',params.row.birthday?params.row.birthday:'--');
                        }
                    },
                    {
                        title: '母亲',
                        key: 'mothername',
                        render: (h, params) => {
                            return h('span',params.row.mothername?params.row.mothername:'--');
                        }
                    },
                    {
                        title: '父亲',
                        key: 'fathername',
                        render: (h, params) => {
                            return h('span',params.row.fathername?params.row.fathername:'--');
                        }
                    },
                    {
                        title: '健康状况',
                        key: 'healthtype',
                        render: (h, params) => {
                            let healthtype=params.row.healthtype;
                            if (healthtype==0) {
                                return h('span','健康');
                            } else if (healthtype==1) {
                                return h('span','良好');
                            } else if (healthtype==2) {
                                return h('span','生病');
                            }
                        }
                    },
                    {
                        title: '接种禁忌',
                        key: 'taboodes',
                        render: (h, params) => {
                            return h('span',params.row.taboodes?params.row.taboodes:'--');
                        }
                    },
                    {
                        title: '过敏史',
                        key: 'allergydes',
                        render: (h, params) => {
                            return h('span',params.row.allergydes?params.row.allergydes:'--');
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 250,
                        className: 'operation',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.editVisible=true;
                                            this.childId=params.row.id;
                                            editpeople({
                                                id: params.row.id
                                            }).then((res) => {
                                               if(res.data.error==0){
                                                     this.editBasicInfo=res.data.r;
                                                     this.hbean=res.data.hbean;
                                                     this.nbean=res.data.nbean;
                                                     this.status=1;
                                               }
                                            })
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.isready==false ? 'inline-block' : 'none',
                                    },
                                    on: {
                                        click: () => {
                                            this.approveVisible=true;
                                            this.childId=params.row.id;
                                            editpeople({
                                                id: params.row.id
                                            }).then((res) => {
                                                if(res.data.error==0){
                                                    this.editBasicInfo=res.data.r;
                                                    this.hbean=res.data.hbean;
                                                    this.nbean=res.data.nbean;
                                                }
                                            })
                                        }
                                    }
                                }, '认证'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.birthday? 'inline-block' : 'none',
                                    },
                                    on: {
                                        click: () => {
                                           // this.vaccineVisible=true;
                                            peoplePlanbaby({
                                                id: this.turnId,
                                                peopleid: params.row.id
                                            }).then((res) => {
                                                if(res.data.error==0){
                                                    if(res.data.lastlist.length==0){
                                                    // 本次推荐
                                                        this.$router.push({path: '/home/theAppoint',query:{turnId: this.turnId,peopleid: params.row.id}});
                                                    }else{
                                                        // 进入上次预约
                                                        this.$router.push({path: '/home/lastAppoint',query:{turnId: this.turnId,peopleid: params.row.id}});
                                                    }
                                                }
                                            })
                                        }
                                    }
                                }, '儿童挂号'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.birthday? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({path: '/home/adultRegister',query:{peopleid: params.row.id,id:params.row.id,turnId: this.turnId}});
                                        }
                                    }
                                }, '成人挂号')
                            ]);
                        }
                    }
                ],
                childId: null,
                editBasicInfo:{},
                hbean:{},
                nbean:{},
                status:1,
            }
        },
        mounted(){
            this.getData();
        },
        computed:{
          turnId(){
            return this.$route.query.turnId;
          }
        },
        watch: {
            infoVisible(newVal,oldVal){
                if(newVal!=oldVal){
                    this.getData();
                }
            },
            editVisible(newVal,oldVal){
                if(newVal!=oldVal){
                    this.getData();
                }
            }
        },
        methods:{
            getData(){
                this.loading = true;
                let formData = Object.assign(this.formItem);
                peoplelist(formData).then((res) => {
                    this.loading = false;
                    if(res.data.error==0){
                        this.childlist=res.data.page.list;
                        this.total=res.data.page.totalRow;
                    }
                })
            },
            pageIndexChange(val){
                this.formItem.pageIndex = val;
                this.getData();
            },
            pageSizeChange(val){
                this.formItem.pageSize = val;
                this.getData();
            },
            back(){
                this.$router.back(-1);
            },
            search(){
                this.formItem.birthday=this.$moment(this.formItem.birthday).format('YYYYMMDD');
                this.getData();
            },
            reset(){
                this.formItem.name = '';
                this.formItem.serial = '';
                this.formItem.idcard = '';
                this.formItem.birthday = '';
                this.formItem.pageIndex = 1;
                this.formItem.pageSize = 10;
                this.getData();
            },
            // 添加儿童
            addPeople(){
                this.infoVisible=true;
            }
        },
        components: {
            navCom,
            navBar,
            editInfo,
            vaccineSelect,
            addInfo,
            approveInfo
        }
    }
</script>

<style lang="less">
    .process-wrapper{
        .content{
            background: #fff;
            padding:20px 10px;
            .search{
                padding-top:20px;
                .top{
                    display: flex;
                    .ivu-form-item{
                        flex: 1;
                    }
                }
                .data{
                    .ivu-form-item{
                        margin-bottom: 0;
                    }
                    .right{
                        float: right;
                        .search-btn{
                            width:120px;
                            height:42px;
                            background:rgba(93,142,252,1);
                            border-radius:4px;
                            font-size:15px;
                            font-family:PingFang-SC-Bold;
                            color:rgba(255,255,255,1);
                            margin-right: 20px;
                        }
                        .reset-btn{
                            width:120px;
                            height:42px;
                            background:rgba(209,217,238,1);
                            border-radius:4px;
                            font-size:15px;
                            font-family:PingFang-SC-Bold;
                            color:rgba(255,255,255,1);
                        }
                    }
                }
                .ivu-form-item-label{
                    font-size:14px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(53,76,107,1);
                }
                .ivu-input{
                    background:rgba(247,249,255,1);
                    border:1px solid rgba(93,141,251,1);
                    height:36px;
                    line-height: 36px;
                    border-radius: 0;
                    font-size: 14px;
                }
            }
        }
        .process-list{
            background: #fff;
            padding:20px 10px 0;
            margin-top: 10px;
           .page-wrapper{
               margin-top:20px;
               padding-bottom: 20px;
               zoom: 1;
               &:after{
                   display:block;
                   clear:both;
                   content:"";
                   visibility:hidden;
                   height:0
               }
               ul{
                   float: right;
               }
           }
            .btn{
                text-align: right;
                margin:10px 0;
                height: 50px;
                border-bottom: 1px dashed #D2D2D2;
                a{
                    height:21px;
                    font-size:16px;
                    color:rgba(26,140,254,1);
                    line-height:31px;
                    border:1px solid rgba(26,140,254,1);
                    border-radius:6px;
                    padding:8px 18px;
                    margin-left: 10px;
                }
            }
        }
        .bottom-btn{
            text-align: center;
            margin-top:30px;
            .back-btn{
                width:119px;
                height:48px;
                background:rgba(93,140,254,1);
                border-radius:6px;
                font-size:20px;
                font-weight:500;
                color:rgba(255,255,255,1);
            }
            .cancel-btn{
                width:119px;
                height:48px;
                background:rgba(209,217,238,1);
                border-radius:6px;
                font-size:20px;
                font-weight:500;
                color:rgba(255,255,255,1);
            }
        }
        .operation{
            .ivu-table-cell{
                div{
                    display: flex;
                }
            }
        }
    }
</style>
